<template>
  <div>
    <component
      v-for="(c, index) in children"
      :key="index"
      v-bind:is="c.name"
      :config="c.config"
      :data="c.data"
    ></component>
  </div>
</template>


<script>
import axios from 'axios'
import blocks from '../../blocks'

const blockKeys = Object.keys(blocks)

const blockComponents = {}
const blockService = {}

blockKeys.forEach(keys => {
  blockComponents[keys] = blocks[keys].block
  blockService[keys] = blocks[keys].service
})

export default {
  layout: 'page',
  components: { ...blockComponents },
  data() {
    return {
      children: []
    }
  },
  async asyncData({ params }) {
    const res = await axios.get(`http://118.24.23.165:4000/${params.collection}`)
    const blocks = res.data

    const hPromise = []

    blocks.forEach(block => {
      if (block.name === 'Hitokoto') {
        hPromise.push(blockService[block.name](block))
      }
    })

    const children = await Promise.all([...hPromise])

    return {
      children
    }
  }
}
</script>
